<!-- eslint-disable vue/no-multiple-template-root -->
<template>
  <view>
    <!-- 标签导航栏 -->
    <div
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
      ">
      <div>
        <u-tabs :list="list1" @click="click2" :current="0"></u-tabs>
      </div>
      <div class="box2" @click="tourl1('/pages/longinsucc/index')">
        <div class="title1">选择职位</div>
        <div>
          <image
            src="https://yong-shan-tuan.oss-cn-hangzhou.aliyuncs.com/f028644f-a521-410b-874c-2782752e31f0.png"
            mode="scaleToFill"
            style="width: 44rpx; height: 44rpx" />
        </div>
      </div>
    </div>
    <!-- 当天订单模块 -->
    <div v-show="actindex != 2 ? true : actindex == 0 ? true : false">
      <up-tabs
        :list="list5"
        @click="click"
        scrollable="true"
        @change="change8"
        :current="index12"></up-tabs>
      <div class="timepick" v-show="actindex == 1 ? true : false">
        <div class="pik1" @click="timepick">
          {{ formatDateTimeForHMS(value1) }}
        </div>
        <div>至</div>
        <div class="pik1" @click="timepick1">
          {{ formatDateTimeForHMS(value2) }}
        </div>
      </div>
      <div class="tabnav">
        <u-tabs
          :list="list2"
          @click="click1"
          :scrollable="true"
          @change="change9"
          lineWidth="0"
          :activeStyle="{
            color: 'rgb(255, 99, 6)',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
          }"
          :inactiveStyle="{
            color: 'rgb(102, 102, 102)',
            transform: 'scale(1)'
          }"
          :current="index1"></u-tabs>
      </div>
      <!-- 菜品卡片 -->
      <div class="box1">
        <div>
          <div
            style="display: flex; justify-content: space-around"
            class="foodtitle">
            <div style="margin-right: 50rpx">菜品</div>
            <div>份数</div>
          </div>
          <div
            class="addclass"
            v-for="(item, index) in list3"
            :key="index"
            @click="search(item.id)">
            <div style="margin-right: 60rpx">{{ item.foodName }}</div>
            <div
              style="
                color: #2979ff;
                font-size: 15px;
                line-height: 17px;
                text-decoration: underline;
              ">
              {{ item.foodCount }}
            </div>
          </div>
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 20rpx;
          "
          @click="searchall()">
          <div>汇总</div>
          <div
            style="
              margin-left: 201rpx;
              color: #2979ff;
              font-size: 15px;
              line-height: 17px;
              text-decoration: underline;
            ">
            {{ total }}份
          </div>
        </div>
      </div>
      <!-- 按钮组 -->
      <div
        style="display: flex; justify-content: space-around; margin-top: 20rpx">
        <div class="btn-z">已出餐</div>
        <div style="display: flex">
          <div class="btn-z" @click="ordermenu()">打印</div>
          <div class="btn-z" style="margin-left: 20rpx" @click="ordermenu()">
            导出
          </div>
        </div>
      </div>
      <div>
        <up-checkbox
          :customStyle="{ marginBottom: '8px' }"
          label="全选"
          name="agree"
          @change="change1"
          :checked="aloneChecked"></up-checkbox>
      </div>
      <!-- 当前订单详情 -->
      <div class="box9" v-for="(item, index) in change5" :key="index">
        <div class="t-box">
          <div>订单详情</div>
          <div>取餐编码：6666</div>
        </div>
        <div>
          <div>
            <div class="flex-box">
              <div style="margin: 0rpx 10rpx" class="cart-font">菜品名：</div>
              <div class="card-ms">{{ item.foodPrintName }}</div>
            </div>
          </div>
          <div style="display: flex; align-items: center">
            <div class="flex-box">
              <div style="margin: 0rpx 10rpx" class="cart-font">用户名：</div>
              <div class="card-ms">{{ item.userName }}</div>
            </div>
            <div class="flex-box">
              <div style="margin-left: 40rpx" class="cart-font">取餐地址：</div>
              <div class="card-ms">{{ item.pickupAddress }}</div>
            </div>
          </div>
          <div style="display: flex; align-items: center">
            <div class="flex-box">
              <div style="margin: 0rpx 10rpx" class="cart-font">手机号：</div>
              <div class="card-ms">{{ item.phone }}</div>
            </div>
            <div class="flex-box">
              <div style="margin-left: 90rpx" class="cart-font">备注：</div>
              <div class="card-ms">{{ item.note ? item.note : '无要求' }}</div>
            </div>
          </div>
          <div>
            <div class="flex-box">
              <div style="margin: 0rpx 10rpx" class="cart-font">下单时间：</div>
              <div class="card-ms">
                {{ formatDateTimeForHMS(item.orderTime) }}
              </div>
            </div>
          </div>
          <div style="padding-bottom: 20rpx">
            <up-checkbox
              :customStyle="{ marginBottom: '8px' }"
              label="打印/导出"
              name="agree"
              :checked="item.checked"
              @change="change2(index)"></up-checkbox>
          </div>
        </div>
      </div>
    </div>
    <!-- 售后订单详情 -->
    <div
      v-show="actindex == 2 ? true : false"
      class="box9"
      v-for="(item, index) in backlist"
      :key="index">
      <div class="t-box">
        <div>订单详情</div>
        <div>顾客申请退款</div>
      </div>
      <div style="padding: 0rpx 20rpx">
        <div>
          <div class="flex-box">
            <div style="margin: 0rpx 10rpx" class="cart-font">菜品名：</div>
            <div class="card-ms">{{ item.foodName }}</div>
          </div>
          <div class="flex-box">
            <div style="margin: 0rpx 10rpx" class="cart-font">用户名：</div>
            <div class="card-ms">{{ item.nickName }}</div>
          </div>
        </div>
        <div>
          <div class="flex-box">
            <div style="margin: 0rpx 10rpx" class="cart-font">手机号：</div>
            <div class="card-ms">{{ item.phone }}</div>
          </div>
        </div>
        <div class="flex-box">
          <div style="margin: 0rpx 10rpx" class="cart-font">下单时间：</div>
          <div class="card-ms">{{ item.createTime }}</div>
        </div>
        <div class="flex-box">
          <div style="margin: 0rpx 10rpx" class="cart-font">售后问题：</div>
          <div class="card-ms">{{ item.afterSaleItemTitle }}</div>
        </div>
        <div class="flex-box">
          <div style="margin: 0rpx 10rpx" class="cart-font">备注：</div>
          <div class="card-ms">
            {{ item.note == null ? '无要求' : item.note }}
          </div>
        </div>
        <div class="flex-box">
          <div style="margin: 0rpx 10rpx 10rpx" class="cart-font">
            取餐地址：
          </div>
          <div class="card-ms">{{ item.pickingAddress }}</div>
        </div>
        <div class="btn-box">退款处理</div>
      </div>
    </div>
    <!-- 时间选择器 -->
    <up-datetime-picker
      hasInput
      :show="show"
      v-model="value1"
      @confirm="confirm"
      @cancel="cancel"
      @change="change7"
      @close="close"></up-datetime-picker>
    <up-datetime-picker
      hasInput
      :show="show1"
      v-model="value2"
      @confirm="confirm1"
      @change="change6"
      @cancel="cancel"
      @close="close"></up-datetime-picker>
  </view>
  <Tabbar></Tabbar>
</template>
<script setup>
import Tabbar from '@/components/tabbar/index.vue'
import {
  formatDateTimeForHMS,
  formatDateTimeForHMS2
} from '@/utils/friendlytime'
import {
  getadd,
  getorder,
  getfoodmenu,
  gethistory,
  gethistorymsg,
  getback
} from '@/api/getaddress'
import { useMemberStore } from '@/stores'
const index1 = ref(0)
const memberStore = useMemberStore()
const total = ref(0)
const address = ref([])
const address1 = ref([])
const show = ref(false)
const show1 = ref(false)
const value1 = ref(Date.now() - 86400000)
const value2 = ref(Date.now())
const backlist = ref([])
// 历史订单查询data
const hisfrom = ref({
  siteId: '',
  keyword: '',
  storeId: memberStore.profile.storeId,
  beginTime: '',
  endTime: '',
  id: ''
})

// 切换显示
const actindex = ref(0)
const aloneChecked = ref(true)
const list1 = ref([
  {
    name: '当天订单'
  },
  {
    name: '历史订单'
  },
  {
    name: '售后订单'
  }
])
const list5 = ref([])
const from = ref({
  siteId: '',
  keyword: '',
  storeId: memberStore.profile.storeId,
  id: ''
})
// 楼栋信息
const list2 = ref([])
// 订单卡片份数信息
const list3 = ref([])
const change5 = ref([])
const tourl1 = (url) => {
  uni.redirectTo({
    url
  })
}
const change1 = (e) => {
  change5.value.forEach((item) => {
    item.checked = e
  })
}
// tab订单页面标签切换
const click2 = (data) => {
  change9(0)
  actindex.value = data.index
  if (data.name == '历史订单') {
    change5.value = [] // 清空订单详情
    list3.value = [] // 菜品统计情况
    hisfrom.value.siteId = list5.value[0].siteId
    gethismsg() // 获取历史订单菜品统计
    gethistorymsg1() // 获取历史订单菜品详情
  } else if (data.name == '当天订单') {
    change5.value = [] // 清空订单详情
    list3.value = [] // 菜品统计情况
    from.value.siteId = list5.value[0].siteId
    getordermsg(from.value) // 获取当天订单菜品统计
    getfoodmsg()
  } else {
    getbacklist()
  }
}
// 关闭时间选择
const cancel = () => {
  show.value = false
  show1.value = false
}
const close = () => {
  show.value = false
  show1.value = false
}
// tab改变
const change9 = (e) => {
  if (e == 0) {
    index1.value = e
    actindex.value == 0
      ? (from.value.keyword = '')
      : (hisfrom.value.keyword = '')
    if (actindex.value == 0) {
      getordermsg(from.value)
      getfoodmsg()
    } else {
      gethismsg()
      gethistorymsg1()
    }
  } else {
    index1.value = e.index
    actindex.value == 0
      ? (from.value.keyword = e.name)
      : (hisfrom.value.keyword = e.name)
    if (actindex.value == 0) {
      getordermsg(from.value)
      getfoodmsg()
    } else {
      gethismsg()
      gethistorymsg1()
    }
  }
}
// 确定时间
const confirm = (e) => {
  if (e.value > value2.value) {
    uni.showToast({
      icon: 'error',
      title: '时间填写错误',
      duration: 2000
    })
    show.value = false
  } else {
    value1.value = e.value
    show.value = false
    gethismsg()
    gethistorymsg1()
  }
}
const confirm1 = (e) => {
  if (e.value < value1.value) {
    uni.showToast({
      icon: 'error',
      title: '时间填写错误',
      duration: 2000
    })
    show1.value = false
  } else {
    value2.value = e.value
    show1.value = false
    gethismsg()
    gethistorymsg1()
  }
}
const click1 = (data) => {
  if (data.name == '全部' && actindex == 1) {
    hisfrom.value.id = ''
    hisfrom.value.keyword = ''
    gethismsg()
    gethistorymsg1()
  } else if (data.name == '全部' && actindex == 0) {
    from.value.id = ''
    from.value.keyword = ''
    getfoodmsg()
    getordermsg(from.value)
  }
  if (actindex.value == 0) {
    from.value.id = ''

    from.value.keyword = ''
    from.value.keyword = data.name
    getfoodmsg()
    getordermsg(from.value)
  } else if (actindex.value == 1) {
    hisfrom.value.id = ''
    // hisfrom.value.siteId = ''
    hisfrom.value.keyword = data.name
    gethismsg()
    gethistorymsg1()
  }
}
/**
 * 站点tab切换
 * @param {站点数据} data
 */
const click = (data) => {
  if (actindex.value == 0) {
    from.value.siteId = data.siteId
    from.value.keyword = ''
    from.value.id = ''
    getordermsg(from.value)
    getfoodmsg()
  } else if (actindex.value == 1) {
    hisfrom.value.siteId = data.siteId
    hisfrom.value.id = ''
    hisfrom.value.keyword = ''
    gethismsg()
    gethistorymsg1()
  }
  list2.value = []
  const floor = address1.value[data.index][0].floorsBriefInfo
  for (let i = 0; i < floor.length; i++) {
    const element = floor[i]
    list2.value.push({
      name: element[0]
    })
  }
  list2.value.unshift({
    name: '全部'
  })
  change9(0)
}
// 历史时间
const timepick = () => {
  show.value = true
}
const timepick1 = () => {
  show1.value = true
}
// 获取站点地址
const getaddress = async () => {
  const res = await getadd(memberStore.profile.storeId)
  address.value = res.result
  list5.value = []
  list2.value = []
  for (let i = 0; i < address.value.length; i++) {
    const element = address.value[i]
    const data = JSON.parse(element.supplyAddress)
    if (i < 1) {
      for (let q = 0; q < data[0].floorsBriefInfo[0].length; q++) {
        const element3 = data[0].floorsBriefInfo[q][0]
        list2.value.push({
          name: element3
        })
      }
    }
    address1.value.push(data)
    for (let j = 0; j < data.length; j++) {
      list5.value.push({
        name: data[j].buildingShortName,
        siteId: element.siteId,
        storeId: element.storeId
      })
    }
  }
  list2.value.unshift({
    name: '全部'
  })
}
// 获取订单详情
const getordermsg = async (data) => {
  if (data.keyword == '全部') {
    data.keyword = ''
  }
  const res = await getorder(data)
  change5.value = res.result.map((item) => {
    item.checked = true
    return item
  })
}
// 获取菜品订单统计
const getfoodmsg = async () => {
  const res = await getfoodmenu(memberStore.profile.storeId)
  list3.value = []
  list3.value = res.result.hcOrderDetailedList
  total.value = res.result.totalCount
}
// 点击份数搜索菜品详情
const search = (id) => {
  if (actindex.value == 1) {
    // 1是历史订单记录
    hisfrom.value.id = id
    hisfrom.value.siteId = ''
    hisfrom.value.keyword = ''
    gethistorymsg1()
    gethismsg()
  } else if (actindex.value == 0) {
    from.value.id = id
    from.value.keyword = ''
    from.value.siteId = ''
    getordermsg(from.value)
    getfoodmsg()
  }
}
// 点击汇总搜索全部
const searchall = () => {
  if (actindex.value == 0) {
    // from.value = {
    //   siteId: '',
    //   keyword: '',
    //   storeId: memberStore.profile.storeId,
    //   id: ''
    // }
    getordermsg(from.value)
    getfoodmsg()
  } else if (actindex.value == 1) {
    hisfrom.value.id = ''
    gethistorymsg1()
    gethismsg()
  }
}
// 全选改变
const change2 = (index) => {
  const num = ref(0)
  change5.value[index].checked = !change5.value[index].checked
  change5.value.forEach((item) => {
    if (item.checked) {
      num.value++
    } else {
      num.value--
    }
  })
  if (num.value == change5.value.length) {
    aloneChecked.value = true
  } else {
    aloneChecked.value = false
  }
}
// 导出订单详情
const ordermenu = async () => {
  const data = ref({})
  if (aloneChecked.value) {
    if (actindex.value == 0) {
      Object.assign(data, { ...from.value })
    } else {
      Object.assign(data, { ...hisfrom.value })
    }
  } else {
  }
  uni.request({
    url: `/jx/merchant_order/exportOrder?siteId=${data.siteId}&keyword=${data.siteId}&storeId=${data.storeId}`,
    method: 'GET',
    responseType: 'arraybuffer',
    success: (res) => {
      const fileManagerObj = uni.getFileSystemManager() // 获取全局的文件管理器
      // 文件存储到本地的路径
      const filePath = `${wx.env.USER_DATA_PATH}/${new Date().getTime()}.xlsx`
      fileManagerObj.writeFile({
        data: res.data, // 拿到的arraybuffer数据
        filePath,
        encoding: 'binary',
        success: (res) => {
          console.log(res) // 成功了的话这里会打印 writeFile:ok
          viewDoc(filePath)
        }
      })
    },
    fail: (err) => {
      console.log(err)
    }
  })
}
const viewDoc = (filePath) => {
  uni.openDocument({
    // 直接打开
    filePath, // 这里填上面写入本地的文件路径
    fileType: 'xlsx',
    showMenu: true, // 右上角是否有可以转发分享的功能，配不配随意
    success: (res) => {
      console.log('打开文档成功')
    }
  })
}
// 获取历史订单统计
const gethismsg = async () => {
  hisfrom.value.beginTime = formatDateTimeForHMS2(value1.value)
  hisfrom.value.endTime = formatDateTimeForHMS2(value2.value)
  if (hisfrom.value.keyword == '全部') {
    hisfrom.value.keyword = ''
  }
  const res = await gethistory(hisfrom.value)
  list3.value = res.result.hcOrderDetailedList
  total.value = res.result.totalCount
}
// 获取历史订单详情
const gethistorymsg1 = async () => {
  hisfrom.value.beginTime = formatDateTimeForHMS2(value1.value)
  hisfrom.value.endTime = formatDateTimeForHMS2(value2.value)
  if (hisfrom.value.keyword == '全部') {
    hisfrom.value.keyword = ''
  }
  const res = await gethistorymsg(hisfrom.value)
  change5.value = []
  change5.value = res.result.map((item) => {
    item.checked = true
    return item
  })
}
// 获取售后订单详情
const getbacklist = async () => {
  const res = await getback(memberStore.profile.storeId)
  backlist.value = res.result
}
onLoad(async () => {
  getaddress()
  getordermsg(from.value)
  getfoodmsg()
})
</script>
<style>
.u-status-bar.data-v-c0b45a48 {
  background: none !important;
}
.u-navbar__content.data-v-9d9e7ee2 {
  background: none !important;
}
.u-navbar--fixed.data-v-9d9e7ee2 {
  background: rgba(255, 99, 6, 1);
  position: relative !important;
}
.flex-box {
  display: flex;
  margin-top: 20rpx;
  align-items: center;
  margin-bottom: 10rpx;
}
.title {
  height: 40rpx;
  color: rgba(255, 255, 255, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  margin: 0rpx 10rpx;
}
.box2 {
  width: 220rpx;
  height: 72rpx;
  border-radius: 36rpx;
  background: rgba(255, 99, 6, 1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10rpx 20rpx;
}
.title1 {
  color: rgba(255, 255, 255, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
}
.nowday {
  width: 750rpx;
  height: 76rpx;
  background: rgba(255, 206, 176, 1);
  margin-top: 15rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 99, 6, 1);
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 28rpx;
}

page {
  background: rgba(246, 246, 246, 1);
}
.box1 {
  width: 690rpx;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.05);
  margin: auto;
  padding: 0rpx 48rpx;
  text-align: center;
}
.foodtitle {
  color: rgba(255, 99, 6, 1);
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 32rpx;
  display: block;
  padding: 20rpx 0rpx;
  border-bottom: 1px solid #ccc;
}
.top-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20rpx 20rpx 10rpx;
  border-bottom: 1px solid rgba(238, 238, 238, 1);
  text-align: center;
}
.addclass1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 107rpx 10rpx;
  border-bottom: 1px solid rgba(238, 238, 238, 1);
  text-align: center;
}
.addclass {
  color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 15rpx;
  border-bottom: 1px solid #ccc;
}

.btn-z {
  width: 160rpx;
  height: 64rpx;
  border-radius: 32rpx;
  background: rgba(255, 99, 6, 1);
  text-align: center;
  line-height: 64rpx;
  color: rgba(255, 255, 255, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
}
.box9 {
  width: 690rpx;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 1);
  margin: 20rpx auto;
}
.t-box {
  width: 690rpx;
  height: 84rpx;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  padding: 0rpx 20rpx;
  background: rgba(255, 99, 6, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
}
.timepick {
  display: flex;
  justify-content: space-around;
  margin: 30rpx auto 20rpx;
}
.pik1 {
  width: 294rpx;
  height: 60rpx;
  border-radius: 30rpx;
  background: rgba(217, 217, 217, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
}
.cart-font {
  color: rgba(102, 102, 102, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
}
.card-ms {
  color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
}
.change-box {
  word-break: break-all; /*换行规则*/
  text-overflow: ellipsis; /*最后使用省略号显示*/
  overflow: hidden; /*超出部分隐藏*/
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /*能够显示几行*/
  line-height: 20px; /*行高，固定写死。后续将会使用它*/
}
.u-checkbox__icon-wrap--square.data-v-abd63d8e {
  margin-left: 500rpx;
}
.change-box1 {
  word-break: break-all; /*换行规则*/
  text-overflow: ellipsis; /*最后使用省略号显示*/
  overflow: hidden; /*超出部分隐藏*/
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /*能够显示几行*/
  line-height: 20px; /*行高，固定写死。后续将会使用它*/
}
.btn-box {
  width: 162rpx;
  height: 64rpx;
  border-radius: 32rpx;
  background: rgba(255, 99, 6, 1);
  margin-left: 500rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
}
</style>
